<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="统计店铺"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    >
    </uni-nav-bar>

    <view class="content">
      <view class="bg-#fff mb-30rpx p-16rpx rounded-16rpx">
        <view class="flex justify-between">
          <view>统计店铺</view>
          <view class="nav-right" @click="handleDataDescription">
            <text class="data-description-text">数据说明</text>
            <uni-icons type="help-filled" size="18" color="#ff9500"></uni-icons>
          </view>
        </view>
        <view class="shop-name">{{ shopInfo.name }}</view>
      </view>
      <!-- 月度统计列表 -->
      <view class="monthly-list">
        <view
          v-for="(item, index) in monthlyData"
          :key="index"
          class="monthly-item"
          @click="handleMonthClick(item)"
        >
          <view class="month-info">
            <text class="month-text">{{ item.month }}</text>
            <text class="amount-text">{{ item.amount }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 数据说明弹框 -->
    <uni-popup ref="dataDescriptionPopup" type="center">
      <view class="data-description-modal">
        <!-- 弹框头部 -->
        <view class="modal-header">
          <text class="modal-title">数据说明</text>
          <uni-icons
            type="close"
            size="24"
            color="#666"
            @click="closeDataDescription"
          ></uni-icons>
        </view>

        <!-- 弹框内容 -->
        <view class="modal-content">
          <view class="description-item">
            <text class="item-number">1、</text>
            <text class="item-text"
              >经营月历数据统计范围自2025年7月1日00:00:00起，至当前日日期前一日的23:59:59；</text
            >
          </view>

          <view class="description-item">
            <text class="item-number">2、</text>
            <text class="item-text"
              >统计数据指标为当月的店铺业绩（会员消费获得的积分）；</text
            >
          </view>

          <view class="description-item">
            <text class="item-number">3、</text>
            <text class="item-text">退款数据统计时间以退款发生时间为准；</text>
          </view>

          <view class="description-item">
            <text class="item-number">4、</text>
            <text class="item-text"
              >包含订单类型：线下汇款、扫码订单、购房购车、海信超市订单；</text
            >
          </view>

          <view class="description-item">
            <text class="item-number">5、</text>
            <text class="item-text"
              >合并店铺的统计范围包含合并店铺下的所有布店铺，对合并店铺还包含有疑问的请联系客服。</text
            >
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 弹框引用
const dataDescriptionPopup = ref(null);

// 店铺信息
const shopInfo = ref({
  name: "临安嘉智行缘",
});

// 月度统计数据
const monthlyData = ref([
  {
    month: "2025年07月",
    amount: "241.1000",
  },
  {
    month: "2025年08月",
    amount: "443.2330",
  },
  {
    month: "2025年09月",
    amount: "253.8600",
  },
  {
    month: "2025年10月",
    amount: "291.0300",
  },
]);

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 数据说明点击
const handleDataDescription = () => {
  dataDescriptionPopup.value?.open();
};

// 关闭数据说明弹框
const closeDataDescription = () => {
  dataDescriptionPopup.value?.close();
};

// 月份点击
const handleMonthClick = (item) => {
  console.log("点击月份:", item);
  uni.showToast({
    title: `查看${item.month}详情`,
    icon: "none",
  });
  // TODO: 跳转到月份详情页面
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  height: 0;
  margin-top: 88rpx;
}

.content {
  padding: 32rpx;
}

// 导航栏右侧
.nav-right {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding-right: 20rpx;
  cursor: pointer;

  &:active {
    opacity: 0.7;
  }
}

.data-description-text {
  font-size: 28rpx;
  color: #ff9500;
  font-weight: 500;
}

// 店铺名称
.shop-name {
  font-size: 32rpx;
  color: #999;
  font-weight: 400;
  text-align: left;
}

// 月度列表
.monthly-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.monthly-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 16rpx;
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.98);
    opacity: 0.8;
  }
}

.month-info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  align-items: flex-start;
}

.month-text {
  font-size: 28rpx;
  color: #999;
  line-height: 1.4;
  font-weight: 400;
}

.amount-text {
  font-size: 64rpx;
  color: #333;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1rpx;
}

// 数据说明弹框
.data-description-modal {
  background: #fff;
  border-radius: 16rpx;
  width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.modal-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.modal-content {
  padding: 32rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.description-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
  line-height: 1.6;

  &:last-child {
    margin-bottom: 0;
  }
}

.item-number {
  font-size: 28rpx;
  color: #333;
  flex-shrink: 0;
  margin-right: 8rpx;
}

.item-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
</style>
